<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Button, Input, Textarea, Select, Form, FormItem, message } from 'ant-design-vue'
import { ArrowLeftOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons-vue'

const router = useRouter()
const route = useRoute()

// 响应式检测
const isMobile = ref(false)
const windowWidth = ref(window.innerWidth)

// 防抖处理的尺寸检测
let resizeTimer = null
const checkScreenSize = () => {
	if (resizeTimer) {
		clearTimeout(resizeTimer)
	}
	resizeTimer = setTimeout(() => {
		windowWidth.value = window.innerWidth
		isMobile.value = window.innerWidth < 768
		// 强制重新渲染
		document.documentElement.style.setProperty('--window-width', `${window.innerWidth}px`)
	}, 100) // 100ms防抖
}

// 编辑模式检测
const isEditing = computed(() => route.params.id && route.params.id !== 'create')
const roleId = computed(() => route.params.id)

// 表单引用
const form = ref()

// 加载状态
const isSubmitting = ref(false)

// 表单数据
const formData = ref({
	name: '',
	description: '',
	personality: '',
	background: '',
	tags: [],
	avatar: '',
	category: '',
	isPublic: true,
})

// 标签输入
const tagInput = ref('')
const inputVisible = ref(false)

// 分类选项
const categoryOptions = ref([
	{ label: '助手工具', value: 'assistant' },
	{ label: '创意写作', value: 'creative' },
	{ label: '技术专家', value: 'technical' },
	{ label: '心理咨询', value: 'psychology' },
	{ label: '语言学习', value: 'language' },
	{ label: '娱乐游戏', value: 'entertainment' },
	{ label: '教育培训', value: 'education' },
	{ label: '商务助理', value: 'business' },
])

// 模拟角色数据（用于编辑模式）
const mockRoles = [
	{
		id: 1,
		name: '智能助手',
		description: '我是一个智能助手，可以帮助你解答各种问题，提供实用的建议和信息。',
		personality: '友善、耐心、博学',
		background: '具备广泛的知识背景，擅长逻辑分析和问题解决。',
		avatar: '',
		tags: ['助手', '问答', '实用'],
		category: 'assistant',
		isPublic: true,
	},
	{
		id: 2,
		name: '文学创作伙伴',
		description: '擅长创意写作、诗歌创作和文学分析，让我们一起探索文字的魅力。',
		personality: '富有想象力、感性、文艺',
		background: '深厚的文学素养，熟悉各种写作技巧和文学流派。',
		avatar: '',
		tags: ['文学', '创作', '诗歌'],
		category: 'creative',
		isPublic: true,
	},
]

// AI生成头像
const generateAvatar = () => {
	const seed = formData.value.name || Math.random().toString()
	formData.value.avatar = `https://lh.ithxs.com/apis.php?act=def&seed=${seed}`
}

// AI润色描述
const aiPolish = () => {
	const examples = [
		'你是一位经验丰富的英语老师，擅长激发学生学习热情的教学方法。你善于运用幽默和实际应用案例，使对话充满趣味。',
		'作为专业的技术顾问，你拥有深厚的编程背景和丰富的项目经验。你能够将复杂的技术概念用简单易懂的方式解释给不同水平的学习者。',
		'你是一位富有创意的文学创作者，熟悉各种文学体裁和写作技巧。你能够为用户提供个性化的写作指导和灵感启发。',
	]
	if (formData.value.description) {
		formData.value.description = formData.value.description + '（AI优化版本）'
	} else {
		formData.value.description = examples[Math.floor(Math.random() * examples.length)]
	}
}

// 试听功能
const tryListen = () => {
	if (formData.value.background) {
		alert('试听功能："' + formData.value.background + '"')
	}
}

// 一键完善 - 自动填充表单字段
const aiOptimize = () => {
	if (!formData.value.name) {
		formData.value.name = '智能助手'
	}
	if (!formData.value.description) {
		aiPolish()
	}
	if (!formData.value.personality) {
		formData.value.personality = '你的专业AI助手，随时为你提供帮助'
	}
	if (!formData.value.background) {
		formData.value.background = '你好！我是你的AI助手，有什么可以帮助你的吗？'
	}
	if (!formData.value.avatar) {
		generateAvatar()
	}
	if (!formData.value.category) {
		formData.value.category = 'assistant'
	}
	// 提示用户已完善
	message.success('✨ 表单已自动完善！请检查并调整内容')
}

// 切换可见性
const toggleVisibility = () => {
	formData.value.isPublic = !formData.value.isPublic
}

// 添加标签
const addTag = () => {
	const tag = tagInput.value.trim()
	if (tag && !formData.value.tags.includes(tag)) {
		formData.value.tags.push(tag)
		tagInput.value = ''
	}
	inputVisible.value = false
}

// 删除标签
const removeTag = tagToRemove => {
	formData.value.tags = formData.value.tags.filter(tag => tag !== tagToRemove)
}

// 重置表单
const resetForm = () => {
	formData.value = {
		name: '',
		description: '',
		personality: '',
		background: '',
		tags: [],
		avatar: '',
		category: '',
		isPublic: true,
	}
}

// 保存角色
const saveRole = async () => {
	if (isSubmitting.value) return // 防止重复提交

	try {
		isSubmitting.value = true
		await form.value.validate()

		// 准备请求数据，映射表单字段到API字段
		const requestData = {
			name: formData.value.name,
			description: formData.value.description,
			avatar: formData.value.avatar || `https://lh.ithxs.com/apis.php?act=def&seed=${formData.value.name || 'default'}`,
			backgroundImage: '', // 背景图片，可选
			category: formData.value.category,
			isSystem: formData.value.isPublic ? 1 : 0, // 映射公开状态
			prompt: formData.value.background || '你好！我是你的AI助手，有什么可以帮助你的吗？',
		}

		if (isEditing.value) {
			// 编辑模式 - 调用更新API
			const { updateRole } = await import('@/api/role')
			const response = await updateRole({
				id: roleId.value,
				...requestData
			})

			message.success('✅ 角色更新成功！')
			setTimeout(() => {
				router.push('/roles')
			}, 1000)
		} else {
			// 创建模式 - 调用创建API
			const { addRole } = await import('@/api/role')
			const response = await addRole(requestData)

			// 检查响应结果
			if (response && (response.success !== false)) {
				message.success('🎉 角色创建成功！正在进入对话...')

				// 创建成功后自动进入对话页面
				// API返回的角色ID可能在不同位置
				const createdRoleId = response.data?.id || response.id || response.roleId
				if (createdRoleId) {
					setTimeout(() => {
						router.push(`/chat/${createdRoleId}`)
					}, 1500) // 延迟1.5秒让用户看到成功提示
				} else {
					// 如果没有返回ID，跳转到角色管理页面
					setTimeout(() => {
						router.push('/roles')
					}, 1500)
				}
			} else {
				throw new Error(response.message || response.msg || '创建失败')
			}
		}
	} catch (error) {
		console.error('保存角色失败:', error)

		// 更详细的错误处理
		if (error.name === 'ValidationError') {
			message.error('表单验证失败，请检查必填项')
		} else if (error.code === 'NETWORK_ERROR' || error.message.includes('网络')) {
			message.error('网络连接失败，请检查网络后重试')
		} else if (error.code === 'TIMEOUT') {
			message.error('请求超时，请重试')
		} else if (error.message) {
			message.error(`创建失败：${error.message}`)
		} else {
			message.error('保存失败，请重试')
		}
	} finally {
		isSubmitting.value = false
	}
}

// 返回角色管理页面
const goBack = () => {
	router.push('/roles')
}

// 加载角色数据（编辑模式）
const loadRoleData = () => {
	if (isEditing.value) {
		const id = parseInt(roleId.value)
		const role = mockRoles.find(r => r.id === id)
		if (role) {
			formData.value = {
				name: role.name,
				description: role.description,
				personality: role.personality,
				background: role.background,
				tags: [...role.tags],
				avatar: role.avatar,
				category: role.category,
				isPublic: role.isPublic,
			}
		}
	}
}

// 组件挂载
onMounted(() => {
	checkScreenSize()
	window.addEventListener('resize', checkScreenSize, { passive: true })
	loadRoleData()
})

// 组件卸载时清理
onUnmounted(() => {
	window.removeEventListener('resize', checkScreenSize)
	if (resizeTimer) {
		clearTimeout(resizeTimer)
	}
})
</script>

<template>
	<div class="role-editor-page">
		<!-- 页面头部 -->
		<div class="editor-header">
			<Button
				type="text"
				@click="goBack"
				class="back-btn"
			>
				<template #icon>
					<ArrowLeftOutlined />
				</template>
				{{ isMobile ? '' : '返回' }}
			</Button>

			<h1 class="editor-title">
				{{ isEditing ? '编辑角色' : '创建智能体' }}
			</h1>

			<Button
				type="text"
				@click="aiOptimize"
				class="optimize-btn"
			>
				<template #icon>
					<svg
						width="16"
						height="16"
						viewBox="0 0 24 24"
						fill="none"
					>
						<path
							d="M12 2L15.09 8.26L22 9L17 14L18.18 21L12 17.77L5.82 21L7 14L2 9L8.91 8.26L12 2Z"
							fill="currentColor"
						/>
					</svg>
				</template>
				<span v-if="!isMobile">一键完善</span>
			</Button>
		</div>

		<!-- 主要内容 -->
		<div class="editor-content">
			<!-- PC端左侧预览 -->
			<div
				v-if="!isMobile"
				class="preview-section"
			>
				<div class="role-preview-card">
					<div class="preview-header">
						<div class="preview-avatar">
							<img
								:src="formData.avatar || `https://lh.ithxs.com/apis.php?act=def&seed=${formData.name || 'default'}`"
								:alt="formData.name || 'AI助手'"
							/>
						</div>
						<div class="preview-info">
							<h3 class="preview-name">{{ formData.name || '未命名角色' }}</h3>
							<p class="preview-intro">{{ formData.personality || '暂无介绍' }}</p>
						</div>
					</div>

					<div class="preview-description">
						{{ formData.description || '暂无描述...' }}
					</div>

					<div
						class="preview-tags"
						v-if="formData.tags.length > 0"
					>
						<span
							v-for="tag in formData.tags"
							:key="tag"
							class="preview-tag"
						>
							{{ tag }}
						</span>
					</div>

					<div
						class="preview-opening"
						v-if="formData.background"
					>
						<div class="opening-label">开场白：</div>
						<div class="opening-text">{{ formData.background }}</div>
					</div>

					<div class="preview-status">
						<span :class="`status-badge ${formData.isPublic ? 'public' : 'private'}`">
							{{ formData.isPublic ? '公开' : '私有' }}
						</span>
					</div>
				</div>
			</div>

			<!-- 表单区域 -->
			<div class="form-section">
				<Form
					ref="form"
					:model="formData"
					layout="vertical"
					@finish="saveRole"
					class="editor-form"
				>
					<!-- 移动端头像区域 -->
					<div
						v-if="isMobile"
						class="mobile-avatar-section"
					>
						<div
							class="mobile-avatar-preview"
							@click="generateAvatar"
						>
							<img
								:src="formData.avatar || `https://lh.ithxs.com/apis.php?act=def&seed=${formData.name || 'default'}`"
								:alt="formData.name || 'AI助手'"
							/>
							<div class="avatar-generate-btn">
								<PlusOutlined />
							</div>
						</div>
						<p class="avatar-tip">AI 生成形象</p>
					</div>

					<!-- PC端分栏布局 / 移动端单栏 -->
					<div :class="isMobile ? 'form-mobile' : 'form-desktop'">
						<!-- 左栏：基础信息 -->
						<div class="form-column-left">
							<div class="column-title">
								<h3>基础信息</h3>
								<p>定义角色的核心特征</p>
							</div>

							<FormItem
								label="角色名称"
								name="name"
								:rules="[{ required: true, message: '请输入角色名称' }]"
							>
								<Input
									v-model:value="formData.name"
									placeholder="如：英语学习助手、编程导师等"
									size="large"
									class="form-input"
								/>
							</FormItem>

							<FormItem
								label="角色分类"
								name="category"
								:rules="[{ required: true, message: '请选择角色分类' }]"
							>
								<Select
									v-model:value="formData.category"
									placeholder="选择最适合的分类"
									size="large"
									:options="categoryOptions"
									class="form-select"
								/>
							</FormItem>

							<FormItem
								label="角色简介"
								name="personality"
							>
								<Input
									v-model:value="formData.personality"
									placeholder="一句话概括角色特点，如：你的英语学习路上最好的伙伴"
									size="large"
									class="form-input"
								/>
							</FormItem>

							<!-- PC端头像设置 -->
							<FormItem
								v-if="!isMobile"
								label="角色头像"
							>
								<div class="avatar-upload-section">
									<div
										class="avatar-preview-large"
										@click="generateAvatar"
									>
										<img
											:src="formData.avatar || `https://lh.ithxs.com/apis.php?act=def&seed=${formData.name || 'default'}`"
											:alt="头像预览"
										/>
										<div class="upload-overlay">
											<UploadOutlined />
											<span>点击生成</span>
										</div>
									</div>
									<div class="avatar-controls">
										<Input
											v-model:value="formData.avatar"
											placeholder="输入自定义图片URL，或点击头像AI生成"
											class="avatar-input"
										/>
										<Button
											type="text"
											@click="generateAvatar"
											class="generate-btn"
										>
											🎨 AI生成头像
										</Button>
									</div>
								</div>
							</FormItem>

							<!-- 标签管理 -->
							<FormItem label="角色标签">
								<div class="tags-section-enhanced">
									<div class="tags-header">
										<span class="tags-hint">添加标签便于用户发现和筛选</span>
									</div>
									<div
										class="tags-list"
										v-if="formData.tags.length > 0"
									>
										<span
											v-for="tag in formData.tags"
											:key="tag"
											class="tag-item-enhanced"
										>
											<span class="tag-text">{{ tag }}</span>
											<button
												type="button"
												class="tag-close"
												@click="removeTag(tag)"
											>
												×
											</button>
										</span>
									</div>
									<div class="tag-input-area">
										<Input
											v-if="inputVisible"
											v-model:value="tagInput"
											placeholder="输入标签名称后按回车确认"
											class="tag-input"
											@blur="addTag"
											@keyup.enter="addTag"
										/>
										<Button
											v-else
											type="dashed"
											@click="inputVisible = true"
											class="add-tag-btn-enhanced"
										>
											<PlusOutlined />
											添加标签
										</Button>
									</div>
								</div>
							</FormItem>
						</div>

						<!-- 右栏：个性化设定 -->
						<div class="form-column-right">
							<div class="column-title">
								<h3>个性化设定</h3>
								<p>塑造角色的交流风格和行为模式</p>
							</div>

							<FormItem
								label="角色设定"
								name="description"
								:rules="[{ required: true, message: '请输入角色描述' }]"
							>
								<div class="textarea-container-enhanced">
									<Textarea
										v-model:value="formData.description"
										placeholder="详细描述角色的背景、专业能力、性格特点、交流风格等，如：&#10;你是一位经验丰富的英语老师，擅长激发学生学习热情的教学方法。你善于运用幽默和实际应用案例，使对话充满趣味..."
										:rows="6"
										show-count
										:maxlength="500"
										class="form-textarea-enhanced"
									/>
									<Button
										type="text"
										size="small"
										class="polish-btn-enhanced"
										@click="aiPolish"
									>
										✨ AI润色优化
									</Button>
								</div>
								<div class="form-tip">💡 详细的设定有助于AI更好地扮演角色，建议包含专业背景、性格特点、交流风格等</div>
							</FormItem>

							<FormItem
								label="开场白"
								name="background"
								:rules="[{ required: true, message: '请输入角色开场白' }]"
							>
								<div class="input-container-enhanced">
									<Textarea
										v-model:value="formData.background"
										placeholder="设置角色开启对话时的第一句话，为用户营造良好的第一印象，如：&#10;你好！我是你专属的英语学习助手，无论是语法问题、词汇扩展还是口语练习，我都会耐心指导你。今天想从哪个方面开始学习呢？"
										:rows="3"
										show-count
										:maxlength="200"
										class="form-textarea"
									/>
									<Button
										type="text"
										size="small"
										class="listen-btn-enhanced"
										@click="tryListen"
									>
										🎵 试听预览
									</Button>
								</div>
								<div class="form-tip">💡 好的开场白能快速建立用户信任，建议体现角色专业性和亲和力</div>
							</FormItem>

							<!-- 高级设置 -->
							<div class="advanced-settings">
								<div class="settings-header">
									<h4>高级设置</h4>
									<span class="settings-desc">配置角色的可见性和其他属性</span>
								</div>
								<div class="settings-card">
									<div
										class="setting-item-enhanced"
										@click="toggleVisibility"
									>
										<div class="setting-icon-enhanced">
											{{ formData.isPublic ? '🌐' : '🔒' }}
										</div>
										<div class="setting-content-enhanced">
											<div class="setting-label">{{ formData.isPublic ? '公开角色' : '私有角色' }}</div>
											<div class="setting-desc">
												{{ formData.isPublic ? '所有用户都可以发现和使用此角色' : '仅自己可见和使用，不会出现在公开列表中' }}
											</div>
										</div>
										<div class="setting-toggle">
											<div :class="`toggle-switch ${formData.isPublic ? 'active' : ''}`">
												<div class="toggle-handle"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 提交按钮 -->
					<div class="form-actions">
						<div class="actions-content">
							<Button
								type="default"
								@click="resetForm"
								size="large"
								class="reset-btn"
							>
								重置表单
							</Button>
							<Button
								type="primary"
								html-type="submit"
								size="large"
								:loading="isSubmitting"
								:disabled="isSubmitting"
								class="submit-btn-enhanced"
							>
								{{ isSubmitting ? (isEditing ? '保存中...' : '创建中...') : isEditing ? '💾 保存更改' : '🚀 创建智能体' }}
							</Button>
						</div>
					</div>
				</Form>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
@use '../styles/variables.scss' as v;

.role-editor-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: transparent;
	position: relative;

	@media (max-width: v.$breakpoint-mobile) {
		// 移动端使用固定定位，避免滚动时背景跟随
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden; // 页面容器不滚动
		backdrop-filter: none;
	}
}

/* 页面头部 */
.editor-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);

	@media (max-width: v.$breakpoint-mobile) {
		padding: 12px 16px;
		background: rgba(255, 255, 255, 0.05);
		backdrop-filter: blur(12px);
		position: fixed; // 确保固定定位
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000; // 确保在最上层
		box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03);
		flex-shrink: 0; // 防止被压缩
	}
}

.back-btn {
	color: #666;
	font-size: 14px;
	padding: 8px 12px;
	border-radius: 8px;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 6px;

	&:hover {
		color: #333;
		background: rgba(0, 0, 0, 0.05);
	}
}

.editor-title {
	font-size: 18px;
	font-weight: 600;
	color: #2c2c2c;
	margin: 0;
	flex: 1;
	text-align: center;
}

.optimize-btn {
	color: #667eea;
	font-size: 13px;
	font-weight: 500;
	padding: 8px 12px;
	border-radius: 8px;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 4px;

	&:hover {
		color: #5a6fd8;
		background: rgba(102, 126, 234, 0.1);
	}
}

/* 主要内容区域 */
.editor-content {
	display: flex;
	gap: 24px;
	padding: 24px;
	flex: 1;
	max-width: 1400px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	transition: all 0.3s ease;

	@media (max-width: 1024px) {
		gap: 20px;
		padding: 20px;
	}

	@media (max-width: v.$breakpoint-mobile) {
		flex-direction: column;
		gap: 0;
		padding: 0;
		padding-top: 70px; // 为固定头部留出空间
		padding-bottom: 120px; // 为固定底栏留出空间
		background: transparent;
		backdrop-filter: none;
		overflow-y: auto; // 确保可以正常滚动
		-webkit-overflow-scrolling: touch; // iOS平滑滚动
		height: 100vh; // 固定高度
		position: absolute; // 绝对定位
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
}

/* PC端预览区域 */
.preview-section {
	flex: 0 0 380px;
	max-width: 380px;
	transition: all 0.3s ease;

	@media (max-width: 1200px) {
		flex: 0 0 320px;
		max-width: 320px;
	}

	@media (max-width: 1024px) {
		flex: 0 0 300px;
		max-width: 300px;
	}
}

.role-preview-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
	position: sticky;
	top: 90px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	transition: all 0.3s ease;

	&:hover {
		transform: translateY(-2px);
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.06);
	}
}

.preview-header {
	display: flex;
	gap: 16px;
	margin-bottom: 20px;
	align-items: center;
}

.preview-avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.preview-info {
	flex: 1;
	min-width: 0;
}

.preview-name {
	font-size: 18px;
	font-weight: 600;
	color: #1a1a1a;
	margin: 0 0 4px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.preview-intro {
	font-size: 14px;
	color: #666;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.preview-description {
	font-size: 14px;
	color: #444;
	line-height: 1.6;
	margin-bottom: 16px;
	background: rgba(255, 255, 255, 0.6);
	padding: 12px;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.04);
}

.preview-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.preview-tag {
	padding: 4px 12px;
	background: rgba(102, 126, 234, 0.1);
	color: #667eea;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;
}

.preview-opening {
	margin-bottom: 16px;
	padding: 12px;
	background: rgba(102, 126, 234, 0.05);
	border-radius: 12px;
	border-left: 3px solid #667eea;
}

.opening-label {
	font-size: 12px;
	color: #667eea;
	font-weight: 500;
	margin-bottom: 4px;
}

.opening-text {
	font-size: 14px;
	color: #555;
	line-height: 1.5;
}

.preview-status {
	text-align: center;
}

.status-badge {
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;

	&.public {
		background: rgba(82, 196, 26, 0.1);
		color: #52c41a;
	}

	&.private {
		background: rgba(250, 173, 20, 0.1);
		color: #faad14;
	}
}

/* 表单区域 */
.form-section {
	flex: 1;
	min-width: 0;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 20px;
	padding: 32px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	transition: all 0.3s ease;

	@media (max-width: 1024px) {
		padding: 28px;
	}

	@media (max-width: v.$breakpoint-mobile) {
		border-radius: 0;
		border: none;
		padding: 24px 20px 16px; // 增加底部内边距，避免被固定按钮挡住
		margin: 0;
		max-height: none;
		overflow-y: visible;
		background: transparent; // 移动端移除背景
		backdrop-filter: none; // 移动端移除毛玻璃效果
		box-shadow: none; // 移动端移除阴影
		flex: 1; // 占满剩余空间
	}
}

/* 移动端头像区域 */
.mobile-avatar-section {
	text-align: center;
	margin-bottom: 32px;
	padding: 20px;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.mobile-avatar-preview {
	position: relative;
	width: 100px;
	height: 100px;
	margin: 0 auto 12px;
	border-radius: 50%;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s ease;

	&:hover {
		transform: scale(1.05);

		.avatar-generate-btn {
			opacity: 1;
		}
	}

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.avatar-generate-btn {
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 28px;
	height: 28px;
	background: #667eea;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 14px;
	opacity: 0.8;
	transition: all 0.2s ease;
}

.avatar-tip {
	font-size: 14px;
	color: #667eea;
	margin: 0;
	font-weight: 500;
}

/* PC端分栏布局 */
.form-desktop {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-bottom: 40px;

	@media (max-width: 1200px) {
		gap: 32px;
	}

	@media (max-width: 1024px) {
		gap: 24px;
	}

	@media (max-width: 900px) {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	@media (max-width: v.$breakpoint-mobile) {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* 移动端单栏布局 */
.form-mobile {
	display: block;
}

/* 表单栏样式 */
.form-column-left,
.form-column-right {
	min-width: 0; // 防止内容溢出
}

.column-title {
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 2px solid rgba(102, 126, 234, 0.15);
	position: relative;

	&::after {
		content: '';
		position: absolute;
		bottom: -2px;
		left: 0;
		width: 60px;
		height: 2px;
		background: linear-gradient(135deg, #667eea, #764ba2);
		border-radius: 1px;
	}

	h3 {
		font-size: 20px;
		font-weight: 700;
		color: #2c2c2c;
		margin: 0 0 8px 0;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	p {
		font-size: 14px;
		color: #666;
		margin: 0;
		line-height: 1.5;
	}
}

/* 表单样式 */
.form-group {
	margin-bottom: 32px;
}

.editor-form {
	:deep(.ant-form-item-label > label) {
		font-weight: 600;
		color: #2c2c2c;
		font-size: 15px;
	}

	:deep(.ant-form-item) {
		margin-bottom: 24px;
	}
}

.form-input,
.form-textarea,
.form-select {
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(8px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-size: 15px;
	font-weight: 400;
	color: #2c2c2c;

	&:hover {
		border-color: rgba(102, 126, 234, 0.3);
		background: rgba(255, 255, 255, 0.9);
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	&:focus {
		border-color: #667eea;
		background: rgba(255, 255, 255, 0.95);
		transform: translateY(-1px);
		box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
	}

	@media (max-width: v.$breakpoint-mobile) {
		border-radius: 12px;
		font-size: 16px; // 防止移动端缩放
	}
}

/* 增强文本区域 */
.textarea-container-enhanced,
.input-container-enhanced {
	position: relative;
}

.form-textarea-enhanced {
	border-radius: 12px;
	border: 1px solid rgba(102, 126, 234, 0.2);
	background: rgba(255, 255, 255, 0.95);
	transition: all 0.3s ease;
	font-size: 14px;
	line-height: 1.6;

	&:hover {
		border-color: rgba(102, 126, 234, 0.3);
		box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.05);
	}

	&:focus {
		border-color: #667eea;
		box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
	}
}

.polish-btn-enhanced,
.listen-btn-enhanced {
	position: absolute;
	top: 12px;
	right: 12px;
	color: #667eea;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 12px;
	border-radius: 8px;
	transition: all 0.2s ease;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(102, 126, 234, 0.2);
	backdrop-filter: blur(4px);

	&:hover {
		background: rgba(102, 126, 234, 0.1);
		transform: translateY(-1px);
		box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
	}
}

.form-tip {
	font-size: 13px;
	color: #666;
	margin-top: 8px;
	padding: 8px 12px;
	background: rgba(102, 126, 234, 0.05);
	border-radius: 8px;
	border-left: 3px solid #667eea;
	line-height: 1.5;
}

/* 原版保持兼容 */
.textarea-container,
.input-container {
	position: relative;
}

.polish-btn,
.listen-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	color: #667eea;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 6px;

	&:hover {
		background: rgba(102, 126, 234, 0.1);
	}
}

/* PC端头像设置 */
.avatar-upload-section {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 20px;
	background: rgba(102, 126, 234, 0.03);
	border-radius: 16px;
	border: 1px solid rgba(102, 126, 234, 0.1);
}

.avatar-preview-large {
	position: relative;
	width: 100px;
	height: 100px;
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s ease;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

	&:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

		.upload-overlay {
			opacity: 1;
		}
	}

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.upload-overlay {
	position: absolute;
	inset: 0;
	background: rgba(102, 126, 234, 0.9);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: white;
	opacity: 0;
	transition: all 0.3s ease;
	backdrop-filter: blur(4px);

	span {
		font-size: 12px;
		margin-top: 4px;
		font-weight: 500;
	}
}

.avatar-controls {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.avatar-input {
	border-radius: 8px;
	font-size: 14px;
}

.generate-btn {
	color: #667eea;
	align-self: flex-start;
	font-size: 14px;
	padding: 6px 12px;
	border-radius: 8px;
	font-weight: 500;
	transition: all 0.2s ease;

	&:hover {
		background: rgba(102, 126, 234, 0.1);
		transform: translateY(-1px);
	}
}

.avatar-preview-small {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s ease;

	&:hover {
		.upload-overlay {
			opacity: 1;
		}
	}

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* 增强标签区域 */
.tags-section-enhanced {
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	padding: 16px;
	background: rgba(255, 255, 255, 0.5);

	@media (max-width: v.$breakpoint-mobile) {
		background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}
}

.tags-header {
	margin-bottom: 12px;
}

.tags-hint {
	font-size: 13px;
	color: #666;
	font-style: italic;
}

.tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

.tag-item-enhanced {
	display: inline-flex;
	align-items: center;
	background: linear-gradient(135deg, #667eea, #764ba2);
	color: white;
	padding: 8px 14px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.2s ease;
	box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);

	&:hover {
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
	}
}

.tag-text {
	margin-right: 6px;
}

.tag-close {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;

	&:hover {
		color: white;
		background: rgba(255, 255, 255, 0.2);
	}
}

.tag-input-area {
	display: flex;
	align-items: center;
}

.tag-input {
	flex: 1;
	border-radius: 8px;
}

.add-tag-btn-enhanced {
	border-color: #667eea;
	color: #667eea;
	border-radius: 8px;
	font-weight: 500;
	transition: all 0.2s ease;

	&:hover {
		border-color: #5a6fd8;
		color: #5a6fd8;
		transform: translateY(-1px);
		box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
	}
}

/* 原版标签区域保持兼容 */
.tags-section {
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: 12px;
	background: rgba(255, 255, 255, 0.9);
}

.tag-item {
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, #667eea, #764ba2);
	color: white;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;
}

.add-tag-btn {
	border-color: #667eea;
	color: #667eea;
	border-radius: 8px;

	&:hover {
		border-color: #5a6fd8;
		color: #5a6fd8;
	}
}

/* 高级设置区域 */
.advanced-settings {
	margin-top: 32px;
}

.settings-header {
	margin-bottom: 16px;

	h4 {
		font-size: 16px;
		font-weight: 600;
		color: #2c2c2c;
		margin: 0 0 4px 0;
	}

	.settings-desc {
		font-size: 13px;
		color: #666;
	}
}

.settings-card {
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.5);
	overflow: hidden;

	@media (max-width: v.$breakpoint-mobile) {
		background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}
}

.setting-item-enhanced {
	display: flex;
	align-items: center;
	padding: 20px;
	cursor: pointer;
	transition: all 0.2s ease;

	&:hover {
		background: rgba(255, 255, 255, 0.08);
		transform: translateY(-1px);
	}

	@media (max-width: v.$breakpoint-mobile) {
		&:hover {
			background: transparent;
			transform: none;
		}
	}
}

.setting-icon-enhanced {
	font-size: 24px;
	margin-right: 16px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(102, 126, 234, 0.1);
	border-radius: 8px;
}

.setting-content-enhanced {
	flex: 1;
	min-width: 0;
}

.setting-toggle {
	margin-left: 16px;
}

.toggle-switch {
	position: relative;
	width: 48px;
	height: 24px;
	background: #ddd;
	border-radius: 12px;
	transition: all 0.3s ease;
	cursor: pointer;

	&.active {
		background: #667eea;

		.toggle-handle {
			transform: translateX(24px);
		}
	}
}

.toggle-handle {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background: white;
	border-radius: 50%;
	transition: transform 0.3s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 原版设置区域保持兼容 */
.settings-section {
	border: 1px solid #f0f0f0;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.5);
	margin-bottom: 32px;
}

.setting-item {
	display: flex;
	align-items: center;
	padding: 16px;
	cursor: pointer;
	transition: background-color 0.2s ease;

	&:hover {
		background: rgba(102, 126, 234, 0.05);
	}
}

.setting-icon {
	font-size: 18px;
	margin-right: 12px;
}

.setting-content {
	flex: 1;
}

.setting-label {
	font-size: 15px;
	font-weight: 500;
	color: #2c2c2c;
}

.setting-desc {
	font-size: 13px;
	color: #666;
}

.setting-arrow {
	color: #999;
	font-size: 18px;
}

/* 提交按钮 */
.form-actions {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid rgba(102, 126, 234, 0.1);

	@media (max-width: v.$breakpoint-mobile) {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 16px 20px;
		padding-bottom: calc(16px + env(safe-area-inset-bottom)); // 适配iPhone底部安全区域
		background: rgba(255, 255, 255, 0.05);
		backdrop-filter: blur(12px);
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		margin-top: 0;
		z-index: 999; // 确保在内容上方但低于头部
		box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.03), 0 -1px 2px rgba(0, 0, 0, 0.02);
		flex-shrink: 0; // 防止被压缩
	}
}

.actions-content {
	display: flex;
	gap: 16px;
	justify-content: center;
	align-items: center;

	@media (max-width: v.$breakpoint-mobile) {
		flex-direction: column;
		width: 100%;
		gap: 12px;
	}
}

.reset-btn {
	height: 48px;
	padding: 0 24px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 500;
	border: 1px solid #d9d9d9;
	transition: all 0.2s ease;

	&:hover {
		border-color: #667eea;
		color: #667eea;
		transform: translateY(-1px);
	}

	@media (max-width: v.$breakpoint-mobile) {
		width: 100%;
		height: 44px;
		order: 2; // 让重置按钮排在创建按钮后面
	}
}

.submit-btn-enhanced {
	height: 48px;
	padding: 0 32px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #ff7eb3 100%);
	border: none;
	border-radius: 16px;
	font-size: 16px;
	font-weight: 600;
	color: white;
	box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3), 0 2px 8px rgba(118, 75, 162, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	min-width: 180px;
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.5s ease;
	}

	&:hover {
		background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 50%, #ff6ba7 100%);
		transform: translateY(-3px);
		box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4), 0 4px 16px rgba(118, 75, 162, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);

		&::before {
			left: 100%;
		}
	}

	&:active {
		transform: translateY(-1px);
	}

	&:disabled {
		opacity: 0.7;
		transform: none;
		cursor: not-allowed;
	}

	@media (max-width: v.$breakpoint-mobile) {
		width: 100%;
		height: 48px;
		font-size: 16px;
		min-width: auto;
		border-radius: 14px;
		order: 1; // 让创建按钮排在第一位
	}
}

/* 原版保持兼容 */
.submit-btn {
	width: 100%;
	height: 48px;
	background: #667eea;
	border: none;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
	transition: all 0.3s ease;

	&:hover {
		background: #5a6fd8;
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
	}

	@media (max-width: v.$breakpoint-mobile) {
		height: 44px;
		font-size: 15px;
		max-width: 100%;
	}
}
</style>
